<script lang="ts" setup>
import { ref, reactive } from 'vue'
const popup = ref<{
  open: () => void
  close: () => void
}>()
const unfinishedOpen = () => {
  popup.value?.open()
}
const unfinishedClose = () => {
  popup.value?.close()
}
defineExpose({
  unfinishedOpen,
  unfinishedClose,
})
</script>

<template>
  <uni-popup ref="popup" type="center">
    <view class="box">
      <view class="boxImage">
        <image class="_image" src="/static/images/unfinishedImage.png" mode="scaleToFill" />
        <view class="text_1">功能正在开发中...</view>
        <view>敬请期待...</view>
      </view>
      <view class="iconfont icon_Frame-1" @tap.stop="popup?.close()"></view>
    </view>
  </uni-popup>
</template>

<style lang="scss">
.box {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  .boxImage {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 500rpx;
    height: 500rpx;
    background-color: #fff;
    border-radius: 16rpx;
    font-size: 28rpx;
    color: #00000080;
    .text_1 {
      margin: 48rpx 0 8rpx 0;
    }
    ._image {
      width: 316rpx;
      height: 200rpx;
    }
  }

  .iconfont {
    margin-top: 32rpx;
    font-size: 68rpx;
    color: #fff;
  }
}
</style>
